<template>
  <van-card v-for="user in userList"
      :price="user.planetCode"
      :desc="user.personalProfile"
      :title="`${user.username}<${user.planetCode}>`"
      :thumb="user.avatarUrl"
      currency=""
      :tag="user.gender === 0 ? '♂' : '♀'"
  >
    <template #tags>
      <van-tag  type="success" plain v-for="tag in user.tags" style="margin-right: 8px;margin-top: 4px">
        {{tag}}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="toUserInfo(user)">联系我</van-button>
    </template>
  </van-card>

  <van-empty image="search" description="暂无用户" v-if="(userList.length < 1 || !userList) && !isLoading" />
  <van-loading  vertical v-if="isLoading">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>

</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {getUsersByTags} from '../api/userApi.ts';
import {tagStore} from "../stores/tag/tag.ts";


const route = useRoute();
const userList = ref([]);
const isLoading = ref(true);

//钩子函数
onMounted(async ()=>{
  const tagStoreAPI = tagStore();
  const tagsNameList = await tagStoreAPI.getTagNameList();
  const res = await getUsersByTags(tagsNameList);
  if (200 === res.code){
    userList.value = res.data;
    userList.value.forEach(user => {
        if (user.tags){
          user.tags = JSON.parse(user.tags);
        }
    });
    isLoading.value = false;
  }
});


//前往用戶信息页面
const toUserInfo = (user:any)=>{
  userStoreAPI.setOtherUserInfo(user);
  router.push('/userInfo');
};


</script>


<style scoped>

</style>